<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
    <link rel="stylesheet" href="../lib/swiper-7.4.1/swiper-7.4.1/swiper/swiper-bundle.min.css">
    <link rel="stylesheet" href="../css/index.css">


</head>

<body>
    <!-- 头部 -->
    <header class="baseHeader">
        <div class="wrapper">
            <div class="logo">
                <a href=""><img src="../static/images/logo.png" alt="">
                    <div class="right">
                        <p>熊猫优选</p>
                        <span>XIOGNG MAO YOU XUAN</span>
                </a>
            </div>
        </div>
        <div class="wrapper-search">
            <input type="text" placeholder="搜索商品，发现更多优惠">
            <button class="onfind">搜索</button>
        </div>
        <div class="advantage">
            <ul>
                <li>
                    <img src="../static/images/nav-2.png" alt="">
                    <span>全程包邮</span>
                </li>
                <li>
                    <img src="../static/images/nav-1.png" alt="">
                    <span>7天退换</span>
                </li>
                <li>
                    <img src="../static/images/nav-2 (1).png" alt="">
                    <span>品质保证</span>
                </li>
            </ul>
            <div class="erl-login">
                <p><a href="../pages/login.html" class="login">登录 /</a>
                    <a href="../pages/enroll.html" class="enroll">注册</a></p>
            </div>

        </div>
    </header>
    <main>
        <!-- 导航 -->
        <div class="nav">
            <div class="normal">
                <ul>
                    <li class="active">首页</li>
                    <li>9块9包邮</li>
                    <li>超值大额券</li>
                    <li>降温急救穿搭</li>
                </ul>
            </div>


        </div>
        <!-- 导航详情 -->
        <div class="pc-view">
            <div class="home">
                <div class="indexBanner">
                    <!-- tab选项卡 -->
                    <div class="tab-show">
                        <div class="classification">
                            <ul>

                                <li data-index="0">
                                    <img src="../static/images/tab-1.png" alt="">
                                    <p>
                                        <a href="">女装/</a>
                                        <a href="">女鞋</a>
                                    </p>
                                </li>
                                <li data-index="1">
                                    <img src="../static/images/tab-2.png" alt="">
                                    <p>
                                        <a href="">男装/</a>
                                        <a href="">男鞋</a>
                                    </p>
                                </li>
                                <li data-index="3">
                                    <img src="../static/images/tab-3.png" alt="">
                                    <p>
                                        <a href="">美妆/</a>
                                        <a href="">个户</a>
                                    </p>
                                </li>
                                <li data-index="4">
                                    <img src="../static/images/tab-4.png" alt="">
                                    <p>
                                        <a href="">配饰/</a>
                                        <a href="">箱包</a>
                                    </p>
                                </li>
                                <li data-index="5">
                                    <img src="../static/images/tab-5.png" alt="">
                                    <p>
                                        <a href="">零食王国</a>
                                    </p>
                                </li>
                                <li data-index="6">
                                    <img src="../static/images/tab-6.png" alt="">
                                    <p>
                                        <a href="">母婴用品</a>
                                    </p>
                                </li>
                                <li data-index="7">
                                    <img src="../static/images/tab-7-1.png" alt="">
                                    <p>
                                        <a href="">手机/</a>
                                        <a href="">数码</a>
                                    </p>
                                </li>
                                <li data-index="8">
                                    <img src="../static/images/tab-7.png" alt="">
                                    <p>
                                        <a href="">内衣袜子</a>

                                    </p>
                                </li>
                                <li data-index="9">
                                    <img src="../static/images/tab-9.png" alt="">
                                    <p>
                                        <a href="">文娱/</a>
                                        <a href="">家居</a>
                                    </p>
                                </li>
                            </ul>
                        </div>
                    </div>
                    <div class="tab-hidden">
                        <div></div>

                    </div>
                    <div class="swiper">
                        <div class="swiper-wrapper">
                            <div class="swiper-slide"><img src="../static/images/banner-1.jpeg" alt=""></div>
                            <div class="swiper-slide"><img src="../static/images/banner-3.jpeg" alt=""></div>
                            <div class="swiper-slide"><img src="../static/images/banner-4.png" alt=""></div>
                        </div>
                        <!-- 导航按钮 -->
                        <div class="swiper-button-prev"></div>
                        <div class="swiper-button-next"></div>
                        <!-- 分页器 -->
                        <div class="swiper-pagination"></div>
                    </div>
                    <div class="swiper-button">
                        <div class="commod">
                            <h3>降温急救穿搭</h3>
                            <p>速来抢购</p>
                            <span><a href="">GO</a></span>
                            <img src="	https://img1.lukou.com/static/coupon/p/image_link/wpyCxJo1GSvfq8vvG1n6GtFRAo37zZ2j.png"
                                alt="">
                        </div>
                        <div class="coupons">
                            <h3>超值大额券</h3>
                            <p>优惠直击底价</p>
                            <span><a href="">GO</a></span>
                            <img src="https://img1.lukou.com/static/p/commodity/img/20181212-235507.png" alt="">
                        </div>

                    </div>
                    <div class="banner-right">
                        <h1>9块9包邮</h1>
                        <img src="../static/images/banner-9.gif " alt="">
                        <img src="	https://img1.lukou.com/static/coupon/p/image_link/Q34r2F1uSePMh64rnVsuidyw1Q7gWi0W.gif"
                            alt="">
                        <img src="../static/images/banner-10.gif" alt="">

                    </div>


                </div>


            </div>
        </div>
        <!-- 商品精选 每日更新-->
        <div class="title">
            <h3>小编精选</h3>
            <p>每日更新</p>
        </div>
        <!-- 商品详情 -->
        <div class="productList">
            <!-- 渲染 -->
        </div>
        <!-- 加载更多 -->
        <div class="choice-more-btn">
            <button class="more-btn">加载更多</button>
        </div>
    </main>
    <!-- 底部 -->
    <footer>
        <img src="../static/images/footer.png" alt="">
    </footer>
    <!-- 回到顶部 -->
    <div class="return-top">
        <img src="../static/images/return.png" alt="">
    </div>

</body>
<!-- 轮播 -->
<script src="../lib/jquery下载文档/jquery-3.6.0.js"></script>
<script src="../lib/swiper-7.4.1/swiper-7.4.1/swiper/swiper-bundle.min.js"></script>

<script src="../js/index.js"></script>

</html>